<script>
import {mapState} from "vuex";

export default {
  name: "userCard",
  computed: {
    ...mapState('user', ['userInfo'])
  }
}
</script>

<template>
  <div class="userCard">
    <div class="avatar">
      <img v-lazy="userInfo.staffPhoto" alt="">
    </div>
    <div class="message">
      <div class="top">早安! {{ userInfo.username }}-祝您开心每一天</div>
      <div class="bottom">{{ userInfo.username }}-传智科技有限公司-{{ userInfo.departmentName }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userCard {
  display: flex;

  .avatar {
    img {
      width: 100px;
      height: 100px;
      border-radius: 100%;
      object-fit: cover;
      cursor: pointer;
    }
  }

  .message {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 10px;
    cursor: pointer;

    .top {
      font-size: 24px;
      color: #303133;
    }

    .bottom {
      font-size: 20px;
      color: #7f8c8d;
    }
  }
}
</style>
